<template>
  <div class="detailsBox">
    <header>
      <div class="iconBox">
        <van-icon name="arrow-left" @click="router.push('/')" />
        <div class="line"></div>
        <van-icon name="wap-home-o" @click="router.push('/')" />
      </div>
    </header>
    <main>
      <div class="bannerBox">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in storeInfo.slider_image" :key="image">
            <img :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="storeBox">
        <div class="s_one">
          <div>
            <span>￥</span>
            <span>{{ storeInfo.price }}</span>
            <span>￥{{ storeInfo.vip_price }}</span>
            <span>VIP</span>
          </div>
          <van-icon name="share-o" />
        </div>
        <div class="s_name">
          <p>
            {{ storeInfo.store_name }}
          </p>
        </div>
        <ul class="s_stock">
          <li>原价:{{ storeInfo.ot_price }}</li>
          <li>库存:{{ storeInfo.stock }}</li>
          <li>销量:{{ storeInfo.fsales }}</li>
        </ul>
        <div class="s_coupon" @click="showPopup">
          <div class="c_left">
            <p>优惠券：</p>
          </div>
          <div class="c_right">
            <van-icon name="arrow" />
          </div>
        </div>
      </div>
      <div class="attribute" @click="showAttris">
        <div class="a_left">
          <div>
            已选择：
            <p class="attrText">红色</p>
          </div>
        </div>
        <div class="a_right">
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="userEvaluation">
        <div>用户评价()</div>
        <div>
          <span>100%</span>好评率
          <van-icon name="arrow" />
        </div>
      </div>
      <div class="recommend">
        <div class="title">优品推荐</div>
        <van-swipe
          class="my-swipe"
          :autoplay="3000"
          indicator-color="white"
          style="height: 150px"
        >
          <van-swipe-item>
            <div
              class="item"
              v-for="(v, i) in good_list"
              :key="i"
              @click="clickItem(v.id)"
            >
              <img :src="v.image" alt="" />
              <p>
                {{ v.store_name }}
              </p>
              <p>￥{{ v.price }}</p>
            </div>
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="product-intro">
        <div class="p_top">产品介绍</div>
      </div>
    </main>
    <div class="footer">
      <van-action-bar>
        <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
        <van-action-bar-icon icon="cart-o" text="购物车" />
        <van-action-bar-icon icon="star" text="已收藏" color="#ff5000" />
        <van-action-bar-button type="warning" text="加入购物车" />
        <van-action-bar-button type="danger" text="立即购买" />
      </van-action-bar>
    </div>
    <!-- 优惠券弹出层 -->
    <van-popup
      v-model:show="show"
      closeable
      round
      close-icon="close"
      position="bottom"
      :style="{ height: '50%', padding: '0px', backgroundColor: '#F5F5F5' }"
      class="coupon_popup"
    >
      <p>优惠券</p>
      <div class="couponBox">
        <user_get_coupon></user_get_coupon>
      </div>
    </van-popup>
    <!-- 规格选择弹出层 -->
    <van-popup
      v-model:show="showAttri"
      closeable
      round
      close-icon="close"
      position="bottom"
      :style="{ height: '50%', padding: '0px', backgroundColor: '#F5F5F5' }"
      class="coupon_popup"
    >
      <div class="textpic">
        <div class="pictrue"></div>
        <div class="text"></div>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { ref, onMounted } from "vue";
import { detailsApi } from "../../api/index";
import user_get_coupon from "./user_get_coupon.vue";
const detailsInfo = ref([]);
const route = useRoute();
const router = useRouter();
const good_list = ref([]);
const storeInfo = ref([]);

detailsApi(route.query.id).then((res) => {
  console.log(res.data);
  good_list.value = res.data.good_list;
  storeInfo.value = res.data.storeInfo;
});

const show = ref(false);
const showAttri = ref(false);
// 优惠券
const showPopup = () => {
  show.value = true;
};
// 规格
const showAttris = () => {
  showAttri.value = true;
};
</script>

<style lang="less" scoped>
.detailsBox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  header {
    position: fixed;
    background-color: #fff;
    top: 0;
    left: 0;
    z-index: 99;
    width: 100%;
    height: 50px;
    .iconBox {
      .line {
        width: 1px;
        height: 14px;
        background: hsla(0, 0%, 100%, 0.25);
      }
      display: flex;
      align-items: center;
      justify-content: space-around;
      color: #fff;
      position: fixed;
      font-size: 20px;
      width: 86px;
      height: 33px;
      z-index: 100;
      left: 10px;
      top: 9px;
      background: rgba(0, 0, 0, 0.25);
      border-radius: 16px;
    }
  }
  main {
    background: #f5f5f5;
    flex: 1;
    overflow: auto;
    margin-bottom: 60px;
    .bannerBox {
      width: 100%;
      height: 390px;
      .van-swipe {
        width: 100%;
        height: 100%;
        .van-swipe-item {
          width: 100%;
          height: 100%;
          img {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
    .storeBox {
      width: 100%;
      background: #fff;
      .s_one {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 18px;
        div {
          :nth-child(1) {
            color: #fc4141;
            font-size: 16px;
            font-weight: 600;
          }
          :nth-child(2) {
            color: #fc4141;
            font-size: 28px;
            font-weight: 700;
          }
          :nth-child(3) {
            font-size: 16px;
            font-weight: 700;
            margin-left: 7px;
          }
          :nth-child(4) {
            font-size: 10px;
            font-weight: 700;
            background: #3e3e3e;
            margin-left: 7px;
            color: goldenrod;
            padding: 0 3px;
          }
        }
      }
      .s_name {
        p {
          font-size: 15px;
          font-weight: 600;
          margin: 0 18px;
        }
      }
      .s_stock {
        display: flex;
        margin: 0 18px;
        font-size: 11px;
        color: #82848f;
        margin-top: 10px;
        justify-content: space-between;
      }
      .s_coupon {
        display: flex;
        padding: 0 18px;
        border-top: 1px solid #f5f5f5;
        margin-top: 12px;
        height: 39px;
        font-size: 12px;
        color: #82848f;
        align-items: center;
        justify-content: space-between;
      }
    }
    .attribute {
      background-color: #fff;
      padding: 0 14px;
      font-size: 12px;
      color: #82848f;
      margin-top: 9px;
      height: 39px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .a_left {
        flex: 1;
        div {
          display: flex;
        }
        .attrText {
          font-size: 13px;
          color: #282828;
        }
      }
    }
    .userEvaluation {
      margin-top: 9px;
      background-color: #fff;
      height: 42px;
      border-bottom: 1px solid #eee;
      font-size: 13px;
      color: #282828;
      padding: 0 14px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      :nth-child(2) {
        color: grey;
        span {
          color: #fc4141 !important;
        }
      }
    }
    .recommend {
      background-color: #fff;
      margin-top: 9px;
      padding-bottom: 4px;

      .title {
        height: 50px;
        font-size: 16px;
        line-height: 50px;
        text-align: center;
        color: #fc4c4c;
        font-weight: normal;
      }
      .van-swipe {
        height: 200px;
      }
      .van-swipe-item {
        height: 200px;
      }

      .van-swipe-item {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-evenly;
        .title {
          height: 100px;
        }
        .item {
          width: 30%;
          height: 100%;
          img {
            width: 100%;
            height: 50%;
            border-radius: 5px;
          }
          p {
            width: 120px;
            height: 14px;
            font-size: 14px;
            line-height: 16px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          p:nth-child(3) {
            color: #fc4c4c;
          }
        }
      }
    }
    .product-intro {
      margin-top: 11px;
      background-color: #fff;
      .p_top {
        font-size: 17px;
        color: #282828;
        height: 49px;
        width: 100%;
        background-color: #fff;
        text-align: center;
        line-height: 49px;
      }
    }
  }

  .coupon_popup {
    p {
      height: 40px;
      width: 100%;
      text-align: center;
      line-height: 60px;
      font-size: 19px;
      font-weight: 700;
    }
  }
}
</style>
